@import '../../style/mixin.scss';

.layout {
    min-height      : 100vh;
    background-color: #fff;
}

.feeDetail {
    padding-top: 96px;

    .feeDetail-title {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;

        h3 {
            @include font(20px, #000);
            margin       : 0 0 0 30px;
            display      : inline-block;
            border-bottom: 2px solid $blue;
        }

        span {
            @include font(14px, #808080);
        }
    }

    .feeDetail-row {
        padding         : 15px 30px;
        background-color: #F7F7F7;

        p {
            @include font(14px, #808080);
            margin: 0;
        }

        span {
            @include font(14px, #000);
        }
    }

    .feeDetail-row-white {
        @extend .feeDetail-row;
        background-color: #fff;
    }

    .pay-item {
        @include flex();
        display: inline-flex;
        border : 1px solid #eee;
        padding: 8px 20px;
        margin : 0 10px;
        cursor : pointer;

        img {
            width       : 24px;
            margin-right: 10px;
        }
    }

    .pay-item-active {
        @extend .pay-item;
        background-image: url(../../assets/img/select-box.png);
        background-size : 100% 100%;
    }

    .feeDetail-row-two {
        padding: 15px 20px 0 110px;
    }

    .sure-btn {
        @include flex();
        @include font(16px, #fff);
        width        : 250px;
        height       : 50px;
        margin-left  : 80px;
        margin-bottom: 60px;

        span {
            color: #fff;
        }
    }

    .detail {
        padding: 20px 30px 40px;

        h3 {
            @include font(16px, #000);
            margin-bottom: 5px;
        }

        .detail-text {
            @include font(12px, #808080);
            width        : 80%;
            margin-bottom: 20px;
            line-height  : 26px;
        }
    }
}